import { Container, Item } from "./styled";
import { toolbarEnum } from "@/contains/toolbarEnum";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
export const ToolBar = () => {
  const [toolBars, setToolBars] = useState(toolbarEnum);
  const navigate = useNavigate();
  const clickMoreHandle = () => {
    toolBars.length === 1 && setToolBars(toolbarEnum);
    toolBars.length === 1 || setToolBars([toolbarEnum[toolbarEnum.length - 1]]);
  };
  const handleClick = (type: string) => {
    switch (type) {
      case "more":
        clickMoreHandle();
        break;
      case "up":
        navigate(-1);
        break;
      case "down":
        navigate(1);
        break;
      case "submit":
        navigate("/publish");
        break;
      default:
        break;
    }
  };
  return (
    <Container>
      {toolBars.map((item) => (
        <Item key={item.key} onClick={() => handleClick(item.key)}>
          {item.text === "前进" ? (
            <>&lt;</>
          ) : item.text === "后退" ? (
            <>&gt;</>
          ) : item.text === "更多" && toolBars.length > 1 ? (
            "收起"
          ) : (
            item.text
          )}
        </Item>
      ))}
    </Container>
  );
};

export default ToolBar;
